<script lang="ts">
export default {
  name: "xt-breadcrumb",
};
</script>

<script setup lang="ts">
import { ElBreadcrumb, ElBreadcrumbItem } from "element-plus";
import Typings from "../../../typings";

interface Props extends /* @vue-ignore */ Typings.Breadcrumb.props {
  options: Typings.Common.option[];
  alias?: Typings.Common.alias;
}

const props = withDefaults(defineProps<Props>(), {
  separator: "/",
  options: () => [],
  alias: () => ({ code: "code", name: "name" }),
});
</script>

<template>
  <el-breadcrumb class="xt-breadcrumb" separator="/">
    <template
      v-for="{
        [props.alias['code']]: code,
        [props.alias['name']]: name,
        ...op
      } in options"
      :key="code"
    >
      <el-breadcrumb-item v-if="code" :to="{ path: code }" v-bind="op">
        {{ name }}
      </el-breadcrumb-item>
      <el-breadcrumb-item v-else v-bind="op"> {{ name }}</el-breadcrumb-item>
    </template>
  </el-breadcrumb>
</template>

<style lang="scss">
@use "../../../scss/xt-breadcrumb.scss";
</style>
